<template>
    <div>
    <table border="1px">
       <thead>
           <tr>
               <th>物品</th>
               <th>单价</th>
               <th>数量</th>
               <th>小计</th>
           </tr>
       </thead>
       <tbody>
           <tr v-for="item in info" :key="item.id">
               <td>{{item.name}}</td>
               <td>{{item.price}}</td>
               <td>
                <el-input-number
              v-model="item.num"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
            ></el-input-number>

               </td>
               <td>{{item.num*item.price}}元</td>
           </tr>
       </tbody>
       <tfoot>
           <tr>
               <td>总价:{{sum}}</td>
           </tr>
       </tfoot>
    </table>
    </div>
</template>

<script>
    export default {
      data() {
          return {
              info: [
            {
                  name:'弯玖弯楼',
                  price:100,
                  num:1
            },
            {
                  name:'Marlboro',
                  price:35,
                  num:1
            },
            {
                  name:'红双喜',
                  price:6,
                  num:1
            },
              ],
              sum:0
          }
      },
      methods: {
          handleChange() {
              this.sum = 0;
        this.info.forEach((item) => {
        this.sum += item.price * item.num;
      });
          }
      },
       created() {
    this.handleChange();
  },
    }
</script>

<style lang="less" scoped>

</style>